<template>
  <div>
    <!-- <div class="table1"> -->
    <div>
<!--      <el-select v-model="" placeholder="请选择" style="position: absolute;left: 150px;width: 100px;">
        <el-option v-for="item in " :key="" :label="" :value="">
        </el-option>
      </el-select> -->
      <el-input v-model="goodsSearchInput" placeholder="根据名称查询" style="width: 300px; margin-left: 200px;"></el-input>
      <el-button @click="goodsSearch(1, size)" style="">查询</el-button>
      <el-button @click="goodsAdd" style="">新增</el-button>
      <el-button @click="goodsDelete" style="">删除</el-button>
      <el-button @click="getAllGoods(1, size)" style="">刷新</el-button>
    </div>
    <div class="table1">
      <el-table :data="goodsList" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <!-- 表格中多选框组件 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="goodsId" label="序列号" width="140">
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="120">
        </el-table-column>
        <el-table-column prop="allCatName" label="分类" width="120">
        </el-table-column>
        <el-table-column prop="inputUserName" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="surveyorName" label="鉴定人" width="120">
        </el-table-column>
        <el-table-column prop="assessorName" label="评估人" width="120">
        </el-table-column>
        <el-table-column prop="inputDate" label="录入时间" width="120">
        </el-table-column>
        <el-table-column prop="goodsStat" :formatter="IsKill" label="商品状态" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="updateGood(scope.row)" type="text" size="small">修改商品信息</el-button>
            <el-button @click="appraiseGood(scope.row)" type="text" size="small">评估</el-button>
            <el-button @click="identifyGood(scope.row)" type="text" size="small">鉴定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- //分页插件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
 <!-- 修改店铺弹框 -->

<el-dialog  title="添加物品" destroy-on-close :visible.sync="addGoodsDialogVisible">
  <AddGoods @closeDialog="closeDialog"></AddGoods>
</el-dialog>

<el-dialog  title="修改物品" destroy-on-close :visible.sync="updateGoodsDialogVisible">
  <UpdateGoods :selectGoodsId="selectGoodsId" @closeDialog="closeDialog"></UpdateGoods>
</el-dialog>

<el-dialog  title="评估物品" destroy-on-close :visible.sync="appraiseGoodsDialogVisible">
  <AppraiseLog :selectGoodsId="selectGoodsId" @closeDialog="closeDialog"></AppraiseLog>
</el-dialog>
<el-dialog  title="鉴定物品" destroy-on-close :visible.sync="identifyGoodsDialogVisible">
  <Goodsif :selectGoodsId="selectGoodsId" @closeDialog="closeDialog"></Goodsif>
</el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'goods',
    data() {
      return {
        goodsList: [],
        goodsSearchInput:"",
        addGoodsDialogVisible:false,
        updateGoodsDialogVisible:false,
        appraiseGoodsDialogVisible:false,
        identifyGoodsDialogVisible:false,
        current: 1,
        total:0,
        pages: 1,
        size:3,
        selectGoodsId:"",
        multipleSelection:[],
        multipleSelectionGoodsId:[]
      }
    },
    methods: {
      getAllGoods(current, size) {
        this.$http.get("/pawnGoods/findgoods", {
          params: {
            current: current,
            size: size
          }
        }).then(resp => {
          console.log(resp.data)
          this.goodsList = resp.data.data.records
          this.pages = resp.data.data.page
          this.current = resp.data.data.current
          this.size = resp.data.data.size
          this.total = resp.data.data.total
        })
      },
      IsKill(row, column) {
        if (row.goodsStat == 1) {
          return "未鉴定"
        } else if (row.goodsStat == 2) {
          return "已鉴定"
        }
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.goodsStat == 1) {
          return 'warning-row'
        }
        // else if (row.goodsStat == 2) {
        //   return 'warning-row1'
        // }
      },
      handleSelectionChange(val) {
          this.multipleSelection = val
          this.multipleSelectionGoodsId = this.multipleSelection.map(element=>{return element.goodsId})
          console.log(this.multipleSelectionGoodsId)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        if(this.goodsSearchInput==""){
          this.getAllGoods(this.current, val);
        }
        else{
          this.goodsSearch(this.current, val);
        }
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        if(this.goodsSearchInput==""){
          this.getAllGoods(val, this.size);
        }
        else{
          this.goodsSearch(val, this.size);
        }
      },
      goodsAdd(){
          this.addGoodsDialogVisible=true
      },
      goodsSearch(current, size){
        this.$http.get("/pawnGoods/findGoodsLike",{
          params:{
            current : current,
            size: size,
            str:  this.goodsSearchInput
          }
        }).then(resp=>{
          this.goodsList = resp.data.data.records
          this.pages = resp.data.data.page
          this.current = resp.data.data.current
          this.size = resp.data.data.size
          this.total = resp.data.data.total
        })
      },
      goodsDelete(){
        var data = new FormData();
        data.append("ids",this.multipleSelectionGoodsId)
        this.$http({
          method: 'post',
          url: "http://localhost:8888/pawnGoods/deleteGoods",
          hearders: {
            'Content-Type': 'multipart/form-data;charset=UTF-8'
          },
          data: data
        }).then(resp=>{
          console.log(resp)
          this.getAllGoods(1, this.size)
        })
      },
      goodsUpdate(){

      },
      closeDialog(childrenVal){
        this.addGoodsDialogVisible=childrenVal
        this.updateGoodsDialogVisible=childrenVal
        this.appraiseGoodsDialogVisible=childrenVal
        this.identifyGoodsDialogVisible=childrenVal
        this.getAllGoods(1, this.size)
      },
      updateGood(self){
        this.selectGoodsId = self.goodsId
        this.updateGoodsDialogVisible=true
        console.log(self)
      },
      appraiseGood(self){
        console.log(self.goodsId);
        this.selectGoodsId = self.goodsId
        this.appraiseGoodsDialogVisible=true
      },
      identifyGood(self){
        this.selectGoodsId = self.goodsId
        this.identifyGoodsDialogVisible=true
      }

    },

    created() {
      this.getAllGoods(1, 3);
    },
    components:{
      AddGoods :require('./AddGoods.vue').default,
      UpdateGoods :require('./UpDateGoods.vue').default,
      AppraiseLog : require('./appraiseLog.vue').default,
      Goodsif : require('./Goodsif.vue').default,    }
  }
</script>

<style>
  .el-table .warning-row {
    background: yellow;
  }

  .el-table .warning-row1 {
    background: greenyellow;
  }

  .shop_top {
    position: absolute;
    height: 50px;
    width: 1030px;
    left: 0px;
    top: 0px;
    background-color: skyblue;
  }

  .table1 {
      margin-top: 50px;
  }
</style>
